{% extends 'page_frame.html' %}
{% load result_filters %}

{% block brand_title %}
    访问设备列表
{% endblock %}

{% block content %}
    <table class="table table-hover">
        <thead>
        <tr>
            {% for item in table_columns %}
                <th style="min-width: 100px">{{ item }}</th>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for item in page_obj %}
            <tr>
                <td>{{ item.device }}</td>
                <td>{{ item.system }}</td>
                <td>{{ item.ip }}</td>
                <td>{{ item.browser }}</td>
                <td title="{{ item.user_agent }}"><div style="max-width: 98%;px;max-height: 3em;overflow: hidden;">{{ item.user_agent }}</div></td>
                <td>{{ item.create_time|date:'Y-m-d H:i:s' }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <div class="row align-items-center">
        {% if page_obj %}
            <!-- 分页 -->
            <div class="col-3">
                总共：{{ page_obj.paginator.count }}条 第{{ page_obj.start_index }}到{{ page_obj.end_index }}条
            </div>

            <div class="col-auto">
                <ul class="pagination">

                    {% if not page_obj.has_previous %}
                        <li class="page-item disabled" disabled="">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% endif %}

                    {% for item in page_obj|pagination_filter %}
                        {% if item == page_obj.number %}
                            <li class="page-item active"><a class="page-link" href="?page={{ item }}">{{ item }}</a>
                            </li>
                        {% else %}
                            <li class="page-item"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>
                        {% endif %}
                    {% endfor %}

                    {% if not page_obj.has_next %}
                        <li class="page-item disabled" disabled="">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% endif %}

                </ul>
            </div>

        {% endif %}

    </div>

{% endblock %}